<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级别与行级别元素</title>
    <style type="text/css">
      #div1{
          background-color: #4E6B33;
          width:200px;
          height: 200px;
      }
  .button{
      width:100px;
      height: 100px;
      /*行级别转块级别-----只有块元素性质*/
      display: block;
  }
      .button1{
          width:100px;
          height: 100px;
          /*行级别转块级别-----内联块元素（块元素行元素的性质都有）*/
          display: inline-block;
      }

    </style>
</head>
<body>
<div id="div1">div块级别div</div>
<span>span行级别span</span>
<span>span行级别span</span><br>


<input type="button" value="行级别" class="button">
<input type="button" value="行级别" class="button">
<hr>
<input type="button" value="行级别" class="button1">
<input type="button" value="行级别" class="button1">
</body>
</html>